{% extends 'base.html' %} {% block css%}
<style type="text/css">
    .info_txt1 {
        color: red;
        font-weight: bolder;
        font-size: 28px;
    }
    .info_txt2 {
        color: blue;
        font-weight: bolder;
        font-size: 28px;
    }
</style>
{% endblock %} {% block body%}
    <div class="row">


        <div class="col-md-4">
            <h3>Auto Fan</h3>
            <table class="table table-hover .table-responsive table-condensed form-inline">
                <tr>
                    <td width="55%">Case Temperature  (ºC)</td>
                    <td> 
                        <span class="info_txt1" id="case_temp">52.5</span>
                    </td>
                </tr>
                <tr>
                    <td>Fan (%)</td>
                    <td> 
                        <span class="info_txt2" id="fan_rate">30</span>
                    </td>
                </tr>

                <tr>
                    <td>Target Temperature  (ºC)</td>
                    <td> 
                        <select onchange="set_fan_start_rate()" class="form-control" style="width:100px; height:42px; font-weight: bolder;font-size: 28px" id="target_temp">
                            <option value="55">55</option>
                            <option value="75">75</option>
                        </select>
                    </td>
                </tr>
  
            </table>

            <button id="btn_auto_fan_start" class="btn btn-success" onclick="btn_auto_fan_start()">
            Start
            &nbsp;&nbsp;
            <i id="btn_auto_fan_start_loading" class="fa fa-refresh fa-spin fa-fw"></i>
            </button>

            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="btn_auto_fan_stop" class="btn btn-warning" onclick="btn_auto_fan_stop()">Stop</button>
        </div>

        <div class="col-md-8">

        </div>

    </div>
{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
var t1;
var t2;
var set_fan_rate2_flag = 1;

function set_fan_start_rate()
{
    target_temp = $("#target_temp").val();
    if (target_temp == 75)
        $("#fan_rate").text(0);
    else
        $("#fan_rate").text(30);
}

function auto_fan_init()
{
    url = "/api/auto_fan_init";
    $.get(url, function(data, status) {
        console.log(data);
        d = JSON.parse(data);
         $.each(d,function(index,value){
            // if(index == "target_temp")
            //     $("#" + index).val(value).prop('selected',true);   
            // else
            //     $("#" + index).text(value);  
            $("#" + index).text(value);  

            // Math.abs(-7.25); 
            if(Math.abs( $("#target_temp").val() - $("#case_temp").text() ) < 1.5)
            {
                clearTimeout(t1);
                $("#btn_auto_fan_start_loading").hide();
                toastr["success"]("Fan adjustment completed.");

                if(set_fan_rate2_flag)
                {
                    set_fan_rate2_flag = 0;
                    $.post(
                        "api/set_fan_rate2", {
                            fan_rate: $("#fan_rate").text(),
                        },
                        function(data, status) {
                            console.log("data: " + data);
                            // $("#case_temp").html(data);
                            $("#fan_rate").text(d["fan_rate"]);
                        }
                    );
                }

            }

        });
    });

    t2 = setTimeout(auto_fan_init, 1000);
}



function btn_auto_fan_stop()
{
    clearTimeout(t1);
    clearTimeout(t2);
    $("#btn_auto_fan_start_loading").hide();
    toastr["success"]("stop");    
}

function btn_auto_fan_start()
{
    $("#btn_auto_fan_start_loading").show();

    console.log('--------------------');
    console.log($("#fan_rate").text());
    $.post(
        "api/check_fan", {
            target_temp: $("#target_temp").val(),
            fan_rate: $("#fan_rate").text(),
        },
        function(data, status) {
            console.log("data: " + data);
            // $("#case_temp").html(data);

            d = JSON.parse(data);
            console.log(d["state"]);
            console.log(d["msg"]);
            console.log(d["case_temp"]);

            if(d["state"] == "FAILED")
            {
                clearTimeout(t1);
                $("#btn_auto_fan_start_loading").hide();
                toastr["warning"](d["msg"]);
            }
            else if(d["state"] == "DONE")
            {
                clearTimeout(t1);
                $("#btn_auto_fan_start_loading").hide();
                toastr["success"](d["msg"]);
            }
            else
            {
                console.log('fan_rate:' + fan_rate);
                $("#fan_rate").text(d["fan_rate"]);
                $("#case_temp").text(d["case_temp"]);
            }

        }
    );

     t1 = setTimeout(btn_auto_fan_start, 1000*180);
}


$(document).ready(function() {
    $("#btn_auto_fan_start_loading").hide();
    auto_fan_init();

});
</script>
{% endblock %}